import React from "react";
import Header from './header/header'
import {getBanner,test} from "../../http";
import Search from './search/search'
import Bottom from './bottom/bottom'
import style from './inedx.module.scss'
class Home extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            banners:[],
            searchType:[],
            searchBook:[],
            newsList:[],
            bookList:[],
            isShowMask:false,
            activeStyle:{color:'#008cff',background:'#e5f3ff'},
            showActiveStyle:0,
            school:'小学',
            id:'40',
        }
    }
    componentDidMount() {
        getBanner(this.state.id).then(data=>{
            this.setState({
                banners:data.adver.h5xxsylb,
                searchType:data.icons.syxxalx,
                searchBook:data.icons.syxxats,
                newsList:data.news,
                bookList:data.brandBooks,
            })
        }).catch(err=>{
            console.log(err)
        })
        test().then(res=>{
            console.log(res)
        }).catch(err=>{
            console.log(err)
        })
    }
    render() {
        return (
            <div className={style.home}>
                <div className={style.title}>
                    <p className={style.p}>首页</p>
                    <p className={style.msg} onClick={()=>{this.showLeavel()}}>
                        <span>{this.state.school}</span>
                        <i></i>
                    </p>
                </div>
                <div className={style.wrapper}>
                    <Header banners={this.state.banners} showActiveStyle={this.state.showActiveStyle}/>
                    <Search searchType={this.state.searchType} searchBook={this.state.searchBook}/>
                    <Bottom newsList={this.state.newsList} bookList={this.state.bookList} route={this.props.route}/>
                </div>
                {this.state.isShowMask&&<div className={style.mask} onClick={()=>{this.hiddenMsk()}}>
                    <div className={style.boxin}></div>
                    <div className={style.box} onClick={(e)=>{this.myClick(e)}}>
                        <div className={style.title}>请选择学段</div>
                        <div className={style.item}>
                            <div className={style.name} style={(this.state.showActiveStyle===0)?this.state.activeStyle:{}} data-name='small'>小学</div>
                            <div className={style.name} style={(this.state.showActiveStyle===1)?this.state.activeStyle:{}} data-name='middle'>初中</div>
                            <div className={style.name} style={(this.state.showActiveStyle===2)?this.state.activeStyle:{}} data-name='height'>高中</div>
                        </div>
                    </div>
                </div>}

            </div>
        );
    }
    showLeavel(){
        this.setState({
            isShowMask:true
        })
    }
    hiddenMsk(){
        this.setState({
            isShowMask:false
        })
    }
    myClick(e){
        e.stopPropagation()
        let type = e.target.dataset.name
        switch (type){
            case 'small':
                this.setState({
                    showActiveStyle:0,
                    school:'小学',
                    isShowMask:false,
                    id:40,
                },()=>{
                    getBanner(this.state.id).then(data=>{
                        this.setState({
                            banners:data.adver.h5xxsylb,
                            searchType:data.icons.syxxalx,
                            searchBook:data.icons.syxxats,
                            newsList:data.news,
                            bookList:data.brandBooks,
                        })
                    }).catch(err=>{
                        console.log(err)
                    })
                })
            break
            case 'middle':
                this.setState({
                    showActiveStyle:1,
                    school:'中学',
                    isShowMask:false,
                    id:36,
                },()=>{
                    getBanner(this.state.id).then(data=>{
                        this.setState({
                            banners:data.adver.h5czsylb,
                            searchType:data.icons.syczalx,
                            searchBook:data.icons.syczats,
                            newsList:data.news,
                            bookList:data.brandBooks,
                        })
                    }).catch(err=>{
                        console.log(err)
                    })
                })
            break
            case 'height':
                this.setState({
                    showActiveStyle:2,
                    school:'高中',
                    isShowMask:false,
                    id:32,
                },()=>{
                    getBanner(this.state.id).then(data=>{
                        console.log(data)
                        this.setState({
                            banners:data.adver.h5gzsylb,
                            searchType:data.icons.sygzalx,
                            searchBook:data.icons.sygzats,
                            newsList:data.news,
                            bookList:data.brandBooks,
                        })
                    }).catch(err=>{
                        console.log(err)
                    })
                })
            break
        }
    }
}
export default Home